<template>
    <!-- div为唯一的根元素 -->
    <!-- 
        细节：
        - 我们希望我们封装的验证码能够灵活展现出来（图片的大小）
            动态绑定图片的宽高比例
        - 如果用户看不清验证码该怎么办？
            点击刷新问题
     -->
    <div>
        <img :src="img" @click="reload" :height="h" :width="w" alt="" />
        <van-loading type="spinner"  v-show="isLoading"/>

    </div>
</template>

<script>
import Vue from "vue";

import uri from "@/config/uri.js";
import { Loading } from 'vant';

Vue.use(Loading);
export default {
    data() {
        return {
            img: "",
            // 加载值
            isLoading:""
        };
    },
    // 接收父传递来的宽高数据
    props: {
        h: {
            default: 30,
        },
        w: {
            default: 100,
        },
    },
    created(){
            this.loadCap();

    },
    methods: {
        // 点击加载刷新验证码
        reload() {
            this.loadCap();
        },
        // 验证码的加载方法
        loadCap() {
            this.$http.get(uri.getCaptcha).then((res) => {
                // console.log(res);
                // 直接赋值即可
                this.img = res.img;
                // 将key写入到vuex中
                this.$store.commit("setCapKey", res.key);
            });
        },
    },
};
</script>

<style scoped>
    img{
        position: relative;
        top: -35px;
        right: 15px;
    }
</style>